import { useEffect, useRef } from 'react'
import mpegts from 'mpegts.js';
const { $fn } = window
/* -------------------------------------------------------- 视频播放器 -- */
const Index = ({
		src,						/** @param {Object}					# 视频地址 */
		config, 					/** @param {Object}					# video 标签配置*/
		player={}, 					/** @param {Object}					# 视频配置 */
		option={} 					/** @param {Object}					# 视频配置 */
	}) => {
	const playerRef = useRef()
	useEffect(()=>{
		if ( !mpegts.isSupported() ) return $fn.msg.warning('此浏览器不支持 flv 视频播放器')
		let url = src ? $fn.url(src) : src
		const isLive = player?.isLive || false
		const _player = mpegts.createPlayer({
			isLive,					// 是否是直播流, 默认 true
			hasAudio: true, 				// 是否播放声音
			hasVideo: true, 				// 是否播放视频
			type: isLive ? 'flv' : 'mp4',	// 媒体类型，flv 或 mp4，默认 flv
			url,						// 指定流地址，可以是 http/https/ws/wss
			cors: true,						// 是否跨域
			withCredentials:false, 
			// duration: 1000,
			// filesize: 100,				// 文件大小 kb
			...player
		},{
			enableWorker: false, 						// 启用分离的线程进行转换（如果不想看到控制台频繁报错把它设置为false，官方的回答是这个属性还不稳定，所以要测试实时视频流的话设置为true控制台经常报错）
			enableStashBuffer: !isLive, 				// 关闭IO隐藏缓冲区（如果需要最小延迟，则设置为 false，此项设置针对直播视频流）
			stashInitialSize: isLive ? 0 : 0, 			// 减少首帧等待时长（针对实时视频流）
			lazyLoad: !isLive, 							// 关闭懒加载模式（针对实时视频流）
			lazyLoadMaxDuration: isLive ? 200 : 0.2, 	// 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
			deferLoadAfterSourceOpen: false, 			// 在 MediaSource sourceopen 事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页。
			liveBufferLatencyChasing: isLive, 			// 追踪内部缓冲区导致的实时流延迟
			liveBufferLatencyMaxLatency: 0.5, 			// HTMLMediaElement 中可接受的最大缓冲区延迟（以秒为单位）之前使用flv.js发现延时严重，还有延时累加的问题，而mpegts.js对此做了优化，不需要我们自己设置快进追帧了
			liveBufferLatencyMinRemain: 0.3, 			// HTMLMediaElement 中可接受的最小缓冲区延迟（以秒为单位）
			...option
		})
		_player.attachMediaElement(playerRef.current)
		_player.load()
		
		// _player.on(mpegts.Events.STATISTICS_INFO, statisticsInfo => {	// http 请求建立好后，该事件会一直监听 mpegts 实例
		// 	console.log(statisticsInfo);
		// })
		_player.on(mpegts.Events.ERROR, (errorType, errorDetail, errorInfo) => {	// 错误信息回调
			console.log(errorInfo)
		})
		playerRef.current.oncontextmenu = function () { return false }
		return () => _player.destroy()
	},[ src, player, option ])
	
	if( config.autoplay !== null && config.autoplay !== undefined ){
		config.autoPlay = config.autoplay
		delete config.autoplay
	}
	
	return (
		<div className='abs_full' style={{background:'#000'}}>
			<video ref={playerRef} className='wh' controls loop {...config} controlsList='nodownload'></video>
		</div>
	)
}
export default Index